{extend name="./app/admin/view/login_tpl.html" /}
{block name="title"}管理员登录 - {__block__}{/block}

{block name="style"}
    <style type="text/css">
    [v-cloak] {
        display: none;
    }
        .ivu-input-group-append {
        padding:0px!important;
    }
    .ivu-input-group-append img {
        height: 34px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        display: block;
    }
    </style>
{/block}
{block name='main'}
        <div style="width: 350px;margin: 0 auto!important;padding-top: 100px;">
            <div class="mip-box" v-cloak>
                <div class="mip-box-body">
                    <h1 class="text-center login-title">登录</h1>
                        <i-form ref="ruleForm" :model="ruleForm" :rules="rules"  label-position="top">
                            <Form-item label="账号" prop="username">
                                <i-Input size="large" v-model="ruleForm.username" placeholder="账号"></i-Input>
                            </Form-item>
                            <Form-item label="密码" prop="password">
                                <i-Input size="large" v-model="ruleForm.password" type="password" placeholder="密码"></i-Input>
                            </Form-item>
                             <Form-item label="验证码" prop="captcha"  @keyup.enter.native="submitForm('ruleForm')">
                            <div>
                                <i-input class="captcha" v-model="ruleForm.captcha" size="large" placeholder="4位字符">
                                    <template slot="append"><img @click="refreshCaptcha" :src="captchaImg" alt="点击刷新" /></template>
                                </i-input>
                            </div>
                        </Form-item>
                            <Form-item>

                                <i-button size="small" type="text" @click="goto_forget_password()">忘记密码</i-button>
                                <i-Button size="large" type="primary" long @click="submitForm('ruleForm')">登录</i-Button>
                            </Form-item>
                        </i-form>
                </div>
            </div>
                        
                     
        </div>
{/block}
{block name="javascript"}
{__block__}

<script>
    new Vue({
        el: '#app',
        data: {
            captchaImg: '{$mipInfo.domain}/captcha.html',
            ruleForm: {
                username: '',
                password: '',
                captcha: '',
            },
            show: 'login-reg show',
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 25, message: '长度在 2 到25 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                captcha: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { min: 4, max: 4, message: '长度为4个字符', trigger: 'blur' }
                ],
            },
        },
        mounted: function mounted() {
        },
        methods: {
            submitForm(formName) {
                let _this = this;
                let __this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$mip.ajax('{$mipInfo.domain}/user/ApiUserUser/do_login', {
                            username: _this.ruleForm.username,
                            password: md5(_this.ruleForm.password),
                            captcha: _this.ruleForm.captcha,
                        }).then(res => {
                            this.refreshCaptcha();
                            if (res.code == 1) {
                                localStorage.setItem('mip_userInfo',JSON.stringify(res.data));
                                localStorage.setItem('user_client_url','');
                                location.href = '{$mipInfo.domain}/{$Think.config.admin}';
                            }
                        });
                    }
                });
            },
            refreshCaptcha: function() {
                this.captchaImg = '{$mipInfo.domain}/?s=/captcha.html&t='+(new Date()).getTime();
            },
            goto_forget_password:function(){
                location.href="/admin/forget_password";
            },
        }
    })
  </script>
{/block}
    